<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、走私人员出行OD分析</div>
<div id="table6-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<#--<table  id='table6' style="margin-top:20px;">
    <tr>
        <th>出行次数</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表6 走私人员出行次数分布特征</div>-->
<div id="myecharts6" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图1 走私人员出行次数分布特征</div>

<div id="table7-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<#--<table  id='table7' style="margin-top:20px;">
    <tr>
        <th>时间区间</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表7 走私人员出行时间分布特征</div>-->
<div id="myecharts7" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图2 走私人员出行时间分布特征</div>

<div id="table8-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">${dataTable8Desc}</div>
<#--<table  id='table8' style="margin-top:20px;">
    <tr>
        <th>时间区间</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表8 走私人员出行距离分布特征</div>-->
<div id="myecharts8" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 走私人员出行距离分布特征</div>

<#--<table  id='table9' style="margin-top:20px;">
    <tr>
        <th>区县</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表9 走私人员出发地分布特征</div>-->
<div id="smu-od-arrive-area-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">${smuOdArriveAreaDesc}</div>
<div id="myecharts9" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 走私人员出发地分布特征</div>
<div id="myecharts10" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图5 走私人员到达地分布特征</div>

<div id="smu-od-work-home-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">${smuOdWorkHomeDesc}</div>
<div id="myecharts11" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图6 走私人员居住地分布特征</div>
<div id="myecharts12" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图7 走私人员工作地分布特征</div>
<script>
    (function () {

        var dataTable6 = ${dataTable6}
            $("#table6-desc").text("${table6Desc}")
        var dataTable7 = ${dataTable7}
        var dataTable7Sorted = ${dataTable7Sorted}
            $("#table7-desc").text("据统计，一天中会有两个高峰，第一个高峰为" + dataTable7Sorted[0].time + "时间段，这段时间内的出行人数占一天中的${dataTable7FirstRegion}%，出行人数高达" + dataTable7Sorted[0].count / 100000 + "万人，第二个高峰为" + dataTable7Sorted[1].time + "时间段，这段时间内的出行人数占一天中的${dataTable7SecondRegion}%，出行人数高达" + dataTable7Sorted[1].count / 10000 + "万人。")
        var dataTable8 = ${dataTable8}

        $(document).ready(function(){
            // 人员出行OD分析
            var result6 = [
                { label: "0~2次", count: 1006 },
                { label: "2~4次", count: 565 },
                { label: "4~6次", count: 4954 },
                { label: "6~8次", count: 221 }
            ];
            var result7 = [
                { label: "08:00", count: 6 },
                { label: "09:00", count: 1445 },
                { label: "10:00", count: 444 },
                { label: "11:00", count: 2144 },
            ];
            var result8 = [
                { label: "0~3KM", count: 6 },
                { label: "3~6KM", count: 445 },
                { label: "6~9KM", count: 444 },
                { label: "9~12KM", count: 244 },
            ];
            var myecharts6 = echarts.init(document.getElementById("myecharts6"));
            var barXAxisData6 = $.map(dataTable6, function(n, i){ return n.frequency  });
            var countValues6 = $.map(dataTable6, function(n, i){ return n.count });
            var optionBar6 = getOptionBar(false, barXAxisData6, countValues6, '人员出行次数分布特征');
            myecharts6.setOption(optionBar6);

            var myecharts7 = echarts.init(document.getElementById("myecharts7"));
            var barLegendData7 = $.map(dataTable7, function(n, i){ return n.timeX })
            var barValues7 = $.map(dataTable7, function(n, i){ return n.count })
            var option7 = getOptionLine(barLegendData7, barValues7, '人员出行时间分布特征')
            myecharts7.setOption(option7);

            var myecharts8 = echarts.init(document.getElementById("myecharts8"));
            var barXAxisData8 = $.map(dataTable8, function(n, i){ return n.time  });
            var countValues8 = $.map(dataTable8, function(n, i){ return n.count });
            var optionBar8 = getOptionBar(false, barXAxisData8, countValues8, '人员出行距离分布特征');
            myecharts8.setOption(optionBar8);

            var mapData9 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
            var mapEcharts9=echarts.init(document.getElementById('myecharts9'));
            var outdata9 = $.map(${smuOdStartAreaData}, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option9 = getOptionMap(outdata9);
            echarts.registerMap('hainan', hainan);
            mapEcharts9.setOption(option9);

            var mapData10 = [{pubArea: "海口", pubCount: 10}, {pubArea: "文昌", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
            var mapEcharts10=echarts.init(document.getElementById('myecharts10'));
            var outdata10 = $.map(${smuOdArrivedAreaData}, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option10 = getOptionMap(outdata10);
            echarts.registerMap('hainan', hainan);
            mapEcharts10.setOption(option10);

            var mapData11 = [{pubArea: "海口", pubCount: 10}, {pubArea: "五指山", pubCount: 813}, {pubArea: "东方", pubCount: 103}];
            var mapEcharts11=echarts.init(document.getElementById('myecharts11'));
            var outdata11 = $.map(${smuOdHomeData}, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option11 = getOptionMap(outdata11);
            echarts.registerMap('hainan', hainan);
            mapEcharts11.setOption(option11);

            var mapData12 = [{pubArea: "海口", pubCount: 10}, {pubArea: "万宁", pubCount: 813}, {pubArea: "白沙", pubCount: 103}];
            var mapEcharts12=echarts.init(document.getElementById('myecharts12'));
            var outdata12 = $.map(${smuOdWorkData}, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option12 = getOptionMap(outdata12);
            echarts.registerMap('hainan', hainan);
            mapEcharts12.setOption(option12);
        });
        function getOptionMap(outdata, map) {
            var mapType = map?map:'hainan'
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
                        } else {
                            return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;'
                        }
                    },
                },
                visualMap: {
                    min: 0,
                    max: 1000,
                    itemWidth: 10,
                    itemHeight: 89,
                    orient: 'horizontal',
                    left: '50',
                    top: '0',
                    text: ['密', '疏'],
                    textStyle: {
                        color: '#666666',
                        fontSize: 13,
                    },
                    inRange: {
                        color: ['#FFFFFF','#ADFF2F','#ADFF2F','#FFA500','#FF4500','#FF0000'],//['#D9EEFF', '#2F9BFF'],
                    },
                    outOfRange: {
                        show: false,
                    },
                },
                geo: {
                    map: mapType,
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                        },
                    },
                },
                series: [
                    {
                        type: 'map',
                        map: mapType,
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return '{name|' + para.name + '}'
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: '#333333',
                                        align: 'center',
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: '#333333',
                                        align: 'center',
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: '#333333',
                                show: mapType==='hainan'?true:false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#D9EEFF',
                                borderColor: mapType==='hainan'?'#ffffff':'#5bacee',
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: '#FFAE00',
                            },
                        },
                        data: outdata,
                        nameMap: mapType==='hainan'?
                            {
                                海口: "海口市",
                                三亚: "三亚市",
                                儋州: "儋州市",
                                五指山: "五指山市",
                                琼海: "琼海市",
                                文昌: "文昌市",
                                万宁: "万宁市",
                                东方: "东方市",
                                定安: "定安县",
                                屯昌: "屯昌县",
                                澄迈: "澄迈县",
                                临高: "临高县",
                                白沙: "白沙黎族自治县",
                                昌江: "昌江黎族自治县",
                                乐东: "乐东黎族自治县",
                                陵水: "陵水黎族自治县",
                                保亭: "保亭黎族苗族自治县",
                                琼中: "琼中黎族苗族自治县",
                                南海诸岛: "三沙市"
                            } : worldNameMap
                    },
                ],
            }
            return option
        }
        function getOptionBar(isMultipleYAxes, barXAxisData, countValues, title, color) {
            // isMultipleYAxes 是否多y轴
            var series = !isMultipleYAxes? [ { type: "bar", data: countValues } ] : countValues
            var legend = isMultipleYAxes? $.map(countValues, function(n, i){ return n.name; }): []
            var option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: color?color: ['#4b91ff'],
                legend: {
                    right: '4%',
                    data: legend,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: barXAxisData,
                },
                yAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        fontSize: 14,
                        show: true,
                        formatter: function(params) {
                            var result = ''
                            result = params / 10000
                            if (params > 1000) {
                                return result + '万'
                            } else {
                                return params
                            }
                        },
                    },
                },
                series: series
            }
            return option
        }
        function getOptionLine(barLegendData, barValues, title) {
            var option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: barLegendData,
                },
                yAxis: {
                    name: '单位/万',
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        fontSize: 14,
                        show: true,
                        formatter: function(params) {
                            var result = ''
                            result = params / 10000
                            if (params > 1000) {
                                return result + '万'
                            } else {
                                return params
                            }
                        },
                    },
                },
                series: [
                    {
                        type: "line",
                        data: barValues,
                        smooth: true,
                        areaStyle: {opacity: 0.3}
                    }
                ]
            }
            return option
        }
    })()
</script>